<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>grid布局</title>
</head>

<body>
  <div>
    <!-- 基本概念 -->
    <div class="title-box">
      <p>1、容器和项目 </p>
      <p>
        采用网格布局的区域，称为"容器"（container）。
        容器内部采用网格定位的子元素，称为"项目"（item）。
      </p>
      <p>容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。</p>

      <p>
        display: grid | inline-grid; // 块级元素 行内元素
      </p>
    </div>

    <div class="grid-warp">
      123
      <div class=" grid-1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      456
    </div>




    <!-- grid-template-* 属性 -->
    <div class="title-box">
      <p>2、grid-template-colimns属性，grid-template-rows属性 </p>
      <p>
        grid-template-columns属性定义每一列的列宽
      </p>
      <p>容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。</p>
    </div>
    <p>
      2-1 grid-template-rows属性定义每一行的行高
    </p>
    <div class="grid-box grid-2-1">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
    <p>
      2-2 使用百分比
    </p>
    <div class="grid-box grid-2-2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
    <p>
      2-3 repeat(num, width)
    </p>
    <div class="grid-box grid-2-3">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>

    <p>
      2-4 有时，单元格的大小是固定的，
      但是容器的大小不确定。
      如果希望每一行（或每一列）容纳尽可能多的单元格，
      这时可以使用<b> auto-fill </b>关键字表示自动填充。
    </p>
    <div class="grid-box grid-2-4">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>

    <p>
      2-5 <b>关键字 fr</b> 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
    </p>
    <div class="grid-box grid-2-5">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>

    <p>
      2-6 <b>minmax()函数</b>
      产生一个长度范围，表示长度就在这个范围之中。
      它接受两个参数，分别为最小值和最大值。
    </p>
    <div class="grid-box grid-2-6">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
    </div>

    <p>
      2-7 <b>auto 关键字</b>
      auto关键字表示由浏览器自己决定长度。
    </p>
    <div class="grid-box grid-2-6">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
    </div>



    <p>
      2-8 <b>网格线的名称</b>
      grid-template-columns属性和grid-template-rows属性里面，
      还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
    </p>
    <div class="grid-box grid-2-6">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>






    <!-- grap 属性 -->
    <div class="title-box">
      <p>3、grap 属性</p>
      <p>
        grid-row-gap属性设置行与行的间隔（行间距）,
      </p>
      <p>
        grid-column-gap属性设置列与列的间隔（列间距）。
      </p>
      <p>
        <b>gap</b>
        <b>grid-gap</b>
        属性是<b>grid-column-gap</b>
        和<b>grid-row-gap</b>的合并简写形式
      </p>
    </div>


    <div class="grid-box grid-3">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>


    <!--  grid-template-areas 属性 -->
    <div class="title-box">
      <p>4、 grid-template-areas 属性
      </p>
      <p>
        网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。
        grid-template-areas属性用于定义区域。
      </p>
      <p>
        子单元格使用grid-area 进行排布
      </p>

    </div>

    <div class="grid-box grid-4">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>





    <!--  grid-template-areas 属性 -->
    <div class="title-box">
      <p>5、grid-auto-flow 属性
      </p>
      <p>
        这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"
      </p>

    </div>

    <div class="grid-box grid-5-1">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>

    <p>
      设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
    </p>
    <div class="grid-box grid-5-2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>




    <!-- justify-items | align-items | place-items 属性 -->
    <div class="title-box">
      <p>6、justify-items | align-items | place-items 属性
      </p>
      <p>
        justify-items属性设置单元格内容的水平位置（左中右）。
      </p>
      <p>
        align-items属性设置单元格内容的垂直位置（上中下）。
      </p>
      <p>
        <b> place-items</b>
        属性是align-items属性和justify-items属性的合并简写形式。
      </p>
    </div>

    <div class="grid-box grid-6">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>





    <!-- justify-content | align-content | place-content 属性 -->
    <div class="title-box">
      <p>7、justify-content | align-content | place-content 属性
      </p>
      <p>
        justify-content属性是整个内容区域在容器里面的水平位置（左中右），
      </p>
      <p>
        align-content属性是整个内容区域的垂直位置（上中下）。
      </p>
      <p>
        <b> place-content</b>
        属性是align-content属性和justify-content属性的合并简写形式。
      </p>
    </div>

    <div class="grid-box grid-7">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>






    <!-- grid-auto-columns 属性  grid-auto-rows属性 -->

    <div class="title-box">
      <p>8、grid-auto-columns | align-auto-rows 属性
      </p>
      <p>
        grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
      </p>
    </div>

    <div class="grid-box grid-8">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>


    <!-- grid-auto-columns 属性  grid-auto-rows属性 -->

    <div class="title-box">
      <p>8、grid-auto-columns | align-auto-rows 属性
      </p>
      <p>
        grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
      </p>
    </div>

    <div class="grid-box grid-8">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>






    <!-- 
          grid-column-start 属性，
        grid-column-end 属性，
        grid-row-start 属性，
        grid-row-end 属性
           -->

    <div class="title-box">
      <p>
        9、grid-column-start | grid-column-end | grid-row-start | grid-row-end 属性
      </p>
      <p>
        grid-column-start属性：左边框所在的垂直网格线 <br>
        grid-column-end属性：右边框所在的垂直网格线 <br>
        grid-row-start属性：上边框所在的水平网格线 <br>
        grid-row-end属性：下边框所在的水平网格线 <br>
      </p>
      <p>
        这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
      </p>
      <p>
        使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。
      </p>
    </div>

    <div class="grid-box grid-9">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>




    <!-- 
          grid-column属性，
        grid-row 属性，
           -->

    <div class="title-box">
      <p>
        10、grid-column| grid-row 属性
      </p>
      <p>
        grid-column属性是grid-column-start和grid-column-end的合并简写形式，
        grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
      </p>

      <p>
        <b>
          grid-area
        </b>
        属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
        grid-area: 1 / 1 / 3 / 3;
      </p>
    </div>

    <div class="grid-box grid-10">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>




    <!-- 
          grid-column属性，
        grid-row 属性，
           -->

    <div class="title-box">
      <p>
        11、justify-self | align-self | place-self
      </p>
      <p>
        justify-self属性设置单元格内容的水平位置（左中右），
        跟justify-items属性的用法完全一致，但只作用于单个项目。
      </p>

      <p>

      </p>

      lign-self属性设置单元格内容的垂直位置（上中下），
      跟align-items属性的用法完全一致，也是只作用于单个项目。
      <p>
        <b>
          place-self
        </b>
        属性是align-self属性和justify-self属性的合并简写形式
      </p>
    </div>

    <div class="grid-box grid-11">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>




  </div>
</body>

</html>